<script setup lang="ts">
import { ref } from "vue";
import { useBanner } from "./composables/useBanner";
const { bannerList } = useBanner();

const tabs = ref([
  {
    name: "汇世界",
  },
  {
    name: "创客星球",
  },
  {
    name: "互动星球",
  },
  {
    name: "知识星球",
  },
  {
    name: "创作中心",
  },
]);

const activeIndex = ref(0); // 默认激活第一个Tab

import RealtimeInfo from "./components/RealtimeInfo.vue";
import DataStatistics from "./components/DataStatistics.vue";
import CommunityBottom from "./components/CommunityBottom.vue";

const functionClick = (index) => {
  activeIndex.value = index;
};
</script>

<template>
  <div class="top-category">
    <div
      class="container m-top-20"
      style="display: flex; justify-content: space-between; margin-top: 10px"
    >
      <div>
        <ul style="background-color: #fff; padding: 10px 0 0; display: flex">
          <li
            v-for="(item, index) in tabs"
            :key="index"
            :class="{ 'active-tab': activeIndex === index }"
            @click="functionClick(index)"
          >
            {{ item.name }}
          </li>
        </ul>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
          "
        >
          <!-- 轮播图左侧 -->
          <RealtimeInfo />

          <!-- 轮播图 -->
          <div class="home-banner">
            <el-carousel height="200px">
              <el-carousel-item v-for="item in bannerList" :key="item.id">
                <img :src="item.imgUrl" alt="" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <!-- 轮播图右侧 -->
      <DataStatistics />
    </div>
    <!-- 创客社区底部 -->
    <CommunityBottom />
  </div>
</template>

<style scoped lang="scss">
.top-category {
  // display: flex;
  li {
    margin: 0 30px;
    cursor: pointer;
  }

  .active-tab {
    color: $xtxColor;
    border-bottom: 1px solid $xtxColor;
    padding-bottom: 7px;
  }
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 100px;
  }

  .title {
    line-height: 20px;
    display: flex;
    .title_left {
      font-weight: bold;
    }
    .title_right {
      margin-left: 6px;
      font-size: 12px;
      color: #aaaaaa;
    }
  }

  .ref-goods {
    background-color: #fff;
    margin-top: 20px;
    position: relative;

    .head {
      .xtx-more {
        position: absolute;
        top: 20px;
        right: 20px;
      }

      .tag {
        text-align: center;
        color: #999;
        font-size: 20px;
        position: relative;
        top: -20px;
      }
    }

    .body {
      display: flex;
      justify-content: space-around;
      padding: 0 40px 30px;
    }
  }

  .bread-container {
    padding: 25px 0;
  }
}

.home-banner {
  width: 589px;
  height: 200px;
  margin-left: 10px;
  // margin: 20px auto 0;

  img {
    width: 100%;
    height: 200px;
  }
}
</style>
